<template>
  <view>
    <uni-popup ref="popup" type="bottom" :mask-click="false">
      <view class="login">
        <view class="loginTitle">
          <view class="h1">欢迎使用苏州创业园小程序</view>
          <view class="h2">加入后可正常使用小程序内的功能</view>
        </view>
        <view class="loginBtn">
          <button v-if="isAgree" open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber">手机号一键登录</button>
          <button v-else @getphonenumber="onGetPhoneNumber" @click="login">手机号一键登录</button>
        </view>
        <view class="loginAgree">
          <uni-forms ref="form" :rules="rules" :modelValue="formData">
            <uni-forms-item label=" " name="agree">
              <uni-data-checkbox v-model="formData.agree" multiple :localdata="agree" @change="agreeChange()" />
              <view class="loginAgreeTip">
                请您阅读并同意<text class="agreeText" @click="userAgree">《用户协议》</text><text class="agreeText" @click="privacyAgree">《隐私条款》</text>等内容以继续操作
              </view>
            </uni-forms-item>
          </uni-forms>
        </view>
      </view>
    </uni-popup>
    <uni-popup ref="userAgreePop" type="bottom">

    </uni-popup>
  </view>
</template>

<script>
import {
  wxLoginMultipart,
  login,
  isLogin
} from "../../api/api";
export default {
  components: {

  },
  props:{

  },
  data () {
    return {
      agreeVal:'',
      isAgree:false,
      agree:[
        {
          text: '',
          value: 0
        }
      ],
      rules:{
        agree:{
          rules:[{
            required: true,
            errorMessage: '请勾选服务协议'
          }]
        }
      },
      formData:{
        agree:[]
      }
    }
  },
  mounted() {
    this.isLoginFun();
  },
  methods: {
    privacyAgree(){
      uni.navigateTo({
        url:'/pages/agree/privacy'
      })
    },
    userAgree(){
      uni.navigateTo({
        url:'/pages/agree/user'
      })
    },
    onGetPhoneNumber(e) {
      if (e.detail.errMsg === "getPhoneNumber:fail user deny") {
        // 用户拒绝了授权
      } else {
        // 用户同意了授权
        uni.showLoading({
          title:'登录中',
          mask:true
        });
        wxLoginMultipart(e.detail.code).then(res => {
          if(res.code == 1){
            uni.login({
              provider: 'weixin', //使用微信登录
              success: (loginRes) => {
                login(res.result.phone,loginRes.code).then(lres => {
                  if(lres.code == 1){
                    uni.setStorageSync('AccessToken',res.result.accessToken);
                    uni.setStorageSync('userInfo',lres.result);
                    this.$refs.popup.close();
                    this.$emit('loginData');
                    uni.showToast({
                      title:lres.message,
                      icon:'none'
                    })
                  } else{
                    uni.showToast({
                      title:lres.message,
                      icon:'none'
                    })
                  }
                })
              }
            });
          } else{
            uni.showToast({
              title:res.message,
              icon:'none'
            })
          }
        });
      }

    },
    isLoginFun(){
      isLogin().then(res => {
        if(res.code != 1){
          this.$refs.popup.open('bottom');
        }
      })
    },
    login(){
      this.$refs['form'].validate().then(res => {

      }).catch(err => {

      })
    },
    agreeChange(e){
      e.detail.data.length > 0 ? this.isAgree = true : this.isAgree = false
    }
  }
}
</script>

<style lang="less" scoped>
.login{
  padding: 56rpx 56rpx 35rpx 56rpx;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  background: #fff;
  border-top-left-radius: 36rpx;
  border-top-right-radius: 36rpx;
  .loginTitle{
    .h1{
      font-size: 36rpx;
      color: #222;
      font-family: sourceHanSansCNMedium;
    }
    .h2{
      font-size: 28rpx;
      color: #555;
      margin-top: 15rpx;
    }
  }
  .loginBtn{
    margin-top: 60rpx;
    button{
      width: 100%;
      height: 88rpx;
      background: linear-gradient(90deg,#67a4ff,#0065fd);
      line-height: 88rpx;
      border-radius: 88rpx;
      border: none;
      font-size: 32rpx;
      color: #fff;
      box-shadow: 0 12rpx 24rpx rgba(0,101,253,0.3);
    }
  }
  .loginAgree{
    margin-top: 53rpx;
    display: flex;
    justify-content: space-between;
    .loginAgreeTip{
      font-size: 28rpx;
      line-height: 44rpx;
      color: #333;
      float: right;
      width: calc(100% - 46rpx);
      text{
        color: #0165fd;
      }
    }
  }
}
</style>
